<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		 <link href="css/iconfont.css" rel="stylesheet"/>
		<link href="css/style.css" rel="stylesheet" />
		<script src="js/mui.min.js"></script>
	</head>

	<body>
		<header class="mui-bar mui-bar-transparent header">
			<a href="#" class="mui-icon iconfont icon-saoyisao mui-pull-left"></a>
		    <a href="#" class="mui-icon iconfont icon-iconfontxiaoxi mui-pull-right"></a>
		    <h1 class="mui-title">
		    	<input type="text" placeholder="你好！跃飞" />
		    </h1>
		</header>
		<div class="mui-content">
		        <div class="mui-slider">
		          <div class="mui-slider-group mui-slider-loop">
		            <!--支持循环，需要重复图片节点   0  1 2 3 0 1 2 3-->
		            <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/sm2_1482065402.jpg" /></a></div>
		            <div class="mui-slider-item"><a href="#"><img src="img/sm2_1482065402.jpg" /></a></div>
		            <div class="mui-slider-item"><a href="#"><img src="img/sm2_1482064045.jpg" /></a></div>
		            <div class="mui-slider-item"><a href="#"><img src="img/sm2_1482064206.jpg" /></a></div>
		            <!--支持循环，需要重复图片节点-->
		            <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/sm2_1482064206.jpg" /></a></div>
		          </div>
		              
		        <!--//轮播图中间底部圆点-->
		          <div class="mui-slider-indicator">
		                <div class="mui-indicator mui-active"></div>
		            <div class="mui-indicator"></div>
		            <div class="mui-indicator"></div>
		          </div>
		        </div>
		        
		        <!--列表-->
		        <div class="box box-jiudian" >
		        	<div class="box-a">
		        		<div class="box-a-l">
		        			<p>酒店</p>
		        			<span class="mui-icon iconfont icon-fill1">
		        				
		        			</span>
		        		</div>
		        		<div class="box-a-r">
		        			<div class="box-a-r-t">
		        				海外酒店
		        			</div>
		        			<div class="box-a-r-t box-a-r-bottom">
		        				特价酒店
		        			</div>
		        		</div>
		        		<div class="box-a-r">
		        			<div class="box-a-r-t">
		        				团购
		        			</div>
		        			<div class="box-a-r-t box-a-r-bottom">
		        				民宿-客栈
		        			</div>
		        		</div>
		        	</div>
		        </div>
		        
		         <div class="box box-jipiao" >
		        	<div class="box-a">
		        		<div class="box-a-l">
		        			<p>机票</p>
		        			<span class="mui-icon iconfont icon-jipiao">
		        				
		        			</span>
		        		</div>
		        		<div class="box-a-r">
		        			<div class="box-a-r-t">
		        				飞机票
		        			</div>
		        			<div class="box-a-r-t box-a-r-bottom">
		        				特价机票
		        			</div>
		        		</div>
		        		<div class="box-a-r">
		        			<div class="box-a-r-t">
		        				火车票-船票
		        			</div>
		        			<div class="box-a-r-t box-a-r-bottom">
		        				专车-租车
		        			</div>
		        		</div>
		        	</div>
		        </div>
		        
		        <div class="box box-lvyou" >
		        	<div class="box-a">
		        		<div class="box-a-l">
		        			<p>旅游</p>
		        			<span class="mui-icon iconfont icon-lvyou">
		        				
		        			</span>
		        		</div>
		        		<div class="box-a-r">
		        			<div class="box-a-r-t">
		        				门票
		        			</div>
		        			<div class="box-a-r-t box-a-r-bottom">
		        				目的地攻略
		        			</div>
		        		</div>
		        		<div class="box-a-r">
		        			<div class="box-a-r-t">
		        				邮轮旅游
		        			</div>
		        			<div class="box-a-r-t box-a-r-bottom">
		        				定制旅游
		        			</div>
		        		</div>
		        	</div>
		        </div>
		        
		        <!--12宫格-->
		        <div class="box-b">
		        	<div class="box-b-a">
		        		<span class="mui-icon iconfont icon-wifi-" ></span>
		        		<p>WIFI电话卡</p>
		        	</div>
		        	<div class="box-b-a">
		        		<span class="mui-icon iconfont icon-iconqianzhengbaoxian"></span>
		        		<p>保险-签证</p>
		        	</div>
		        	<div class="box-b-a">
		        		<span class="mui-icon iconfont icon-waibiduihuanfuwu"></span>
		        		<p>外币兑换</p>
		        	</div>
		        	<div class="box-b-a">
		        		<span class="mui-icon iconfont icon-gouwu1"></span>
		        		<p>购物</p>
		        	</div>
		        	<div class="box-b-a">
		        		<span class="mui-icon iconfont icon-53a93feaaf1a2zhuanhuaneps"></span>
		        		<p>礼品卡</p>
		        	</div>
		        	<div class="box-b-a">
		        		<span class="mui-icon iconfont icon-ziyouhang"></span>
		        		<p>自由行</p>
		        	</div>
		        	<div class="box-b-a">
		        		<span class="mui-icon iconfont icon-dangdiwanle"></span>
		        		<p>当地玩乐</p>
		        	</div>
		        	<div class="box-b-a">
		        		<span class="mui-icon iconfont icon-xinyongqia"></span>
		        		<p>信用卡</p>
		        	</div>
		        	<div class="box-b-a">
		        		<span class="mui-icon iconfont icon-333-01"></span>
		        		<p>合作加盟</p>
		        	</div>
		        	<div class="box-b-a">
		        		<span class="mui-icon iconfont icon-hangli"></span>
		        		<p>寄送行李</p>
		        	</div>
		        	<div class="box-b-a">
		        		<span class="mui-icon iconfont icon-zhutiyou"></span>
		        		<p>主题游</p>
		        	</div>
		        	<div class="box-b-a">
		        		<span class="mui-icon iconfont icon-gengduo"></span>
		        		<p>更多</p>
		        	</div>		        	
		        </div>
		        
		        <!--广告-->
		        <div class="box-c">
		        	<p id="p">
		        		<span class="box-c-span1">特卖会</span>
		        		<span class="box-c-span2">
		        		<span>更多特卖</span>
		        		<span class="box-c-span3 mui-icon mui-icon-arrowright"></span>
		        		</span>
		        	</p>
		        	<div class="box-c-l">
		        		<img src="img/temaihui.jpg"/>
		        		<h4>长沙+韶山+张边界 7日6晚跟团游</h4>
		        		<p>
		        			￥ 1699起
		        			<span class="box-c-l-span">
		        				省￥501
		        			</span>
		        		</p>
		        	</div>
		        	<div class="box-c-r">
			        	<div class="box-c-r-t">
			        		<div class="box-c-r-t-l">
			        			<h4 class="h4">千款特价</h4>
			        			<p>我们来帮你省钱</p>
			        		</div>
			        		<div class="box-c-r-t-r">
			        			<img src="img/sale.jpg"/>
			        		</div>
			        	</div>
			        	<div class="box-c-r-b">
			        		<div class="box-c-r-b-l">
			        			<h4 class="h4">海外精选</h4>
			        			<p>超值3折起</p>
			        			<img src="img/haiwaijingxuan.jpg"/>
			        		</div>
			        		<div class="box-c-r-b-r">
			        			<h4 class="h4">畅游国内</h4>
			        			<p>9元度周末</p>
			        			<img src="img/gouneichuangyou.jpg"/>
			        		</div>
			        	</div>
		        	</div>
		        </div>
		        
		        
		</div>
			<script src="js/castapp.js"></script>
		    <script type="text/javascript" charset="utf-8">
		      	castapp.init();
				/**
				 * 图片轮播
				 * 
				 * 参数 : json
				 * callback 回调 回调参数 pictureNumber 返回当前浏览的第几张图片 
				 * isAutoScroll 是否滚动  true 滚动 false 不滚动
				 * scrollTime 滚动时间 比如 1 为 1秒滚动一次
				 */
				castapp.pictureScroll({
				    callback:function(pictureNumber){
					    console.log(pictureNumber);
				    },
				    isAutoScroll:true,
				    scrollTime:3
				});
		    </script>
	</body>
</html>